<template>
  <view class="lazy-content">
    <image
      style="height: 200rpx; width: 200rpx"
      class="lazy-image"
      @error="catchError"
      @load="successLoad"
      :src="showImage ? url : placeholderUrl"
      mode="scaleToFill"
    />
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const showImage = ref(false) //控制图片展示和加载
const imageurl = ref<string>('') //控制图片展示和加载

const props = defineProps<{
  url: string
  placeholderUrl: string
}>()

onLoad(() => {
  console.log('sssssssss')
})

// 捕获错误
const catchError = () => {
  imageurl.value = props.placeholderUrl
}

// 图片加载完成
const successLoad = () => {
  showImage.value = true
}

defineExpose({
  successLoad,
})
</script>
<style scoped lang="scss"></style>
